<template>
  <div>
    <div class="head">
      <span>考生号：</span>
      <el-input v-model="number" placeholder="请输入考生号"></el-input>
      <button @click="inquiry">查询</button>
    </div>
    <div class="container">
      <div>姓名：{{name}}</div>
      <div>省份：{{province}}</div>
      <div>计划类别：{{type}}</div>
      <!-- <img src="http://118.31.51.131:8081/api/zsxt/lqgl/kszp/ck?ksh=20440103109078&token=123456" alt=""> -->
      <img :src="'http://118.31.51.131:8081/api/zsxt/lqgl/kszp/ck?ksh=' + ksh + '&token=' + token" alt="未查询到照片">
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request"
export default {
  name: '',
  data() {
    return {
      number: '',
      name: '',
      province: '',
      type: '',
      token: '',
      ksh: '',
    }
  },
  methods: {
    inquiry() {
      if(this.number != '') {
        this.ksh = this.number
        this.token = sessionStorage.getItem('token')
        request({
          url: 'http://118.31.51.131:8081/api/zsxt/lqgl/kszp/xm',
          method: 'post',
          params: {
            ksh: this.number,
            token: sessionStorage.getItem('token')
          }
        }).then(value => {
          if(value.data == '考生号输入错误，无法得到名字') {
            alert('考生号错误')
          }
          console.log(value);
          this.name = value.data.xm
          this.province = value.data.sf
          this.type = value.data.kslx
        })
      }
    }
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 4] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  components: {}
}
</script>

<style scoped>
.head {
  height: 80px;
  border-bottom: 1px solid black;
}
.head span {
  font-size: 20px;
  line-height: 80px;
  margin-left: 25px;
}
.head .el-input {
  width: 280px;
}
.head button {
  margin-left: 960px;
}
.head button {
  width: 100px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
button:active {
  opacity: 0.8;
}
.container {
  font-size: 20px;
}
.container div:nth-of-type(1) {
  position: absolute;
  top: 200px;
  left: 300px;
}
.container div:nth-of-type(2) {
  position: absolute;
  top: 300px;
  left: 300px;
}
.container div:nth-of-type(3) {
  position: absolute;
  top: 400px;
  left: 300px;
}
.container img {
  position: absolute;
  top: 160px;
  left: 700px;
  height: 320px;
  width: 240px;
}
</style>